<!-- 用户页 -->
<template>
  <div class="user">
    <!-- 顶部标题栏组件 -->
    <top-header></top-header>
    <!-- 个人中心板块 -->
    <div class="user-content">
      <van-image round width="1.5rem" height="1.5rem"
        :src="'/Upload'+ imgSrc || 'https://i.loli.net/2020/10/29/K2BtaMRJohjUPnE.jpg'" @click="onClick" />
      <div class="user-name">{{ userName }}</div>
    </div>
    <!-- content内容 -->
    <div class="content">
      <div class="list1">
        <van-cell is-link title="我的任务" @click="click1" />
        <van-cell is-link title="我的日志" @click="click2" />
        <van-cell is-link title="我的请假" @click="click3" />

      </div>
      <div class="list2">
        <van-cell is-link title="费用审批" @click="click4" />
        <van-cell v-if="power" is-link title="请假审批" @click="click5" />
        <van-cell is-link title="绩效考核" @click="click6" />
        <van-cell v-if="power" is-link title="数据展示" @click="click7" />
      </div>
    </div>
    <!-- 路由导航组件 -->
    <nav-bar></nav-bar>

    <!-- 用户操作动作面板 -->
    <van-action-sheet v-model="sheetShow" cancel-text="取消" close-on-click-action>
      <van-button type="default" block @click="handleLogout" style="border-bottom: none;">切换用户</van-button>
      <van-uploader :after-read="afterRead">
        <van-button type="default" block>图片上传</van-button>
      </van-uploader>
    </van-action-sheet>
  </div>
</template>

<script>
import { TopHeader, NavBar } from '@/components'
import { uploadImage } from '@/request/api'
export default {
  name: 'User',
  components: {
    TopHeader,
    NavBar
  },
  data () {
    return {
      userName: sessionStorage.getItem('userName'), // 用户名
      sheetShow: false, // 动作面板显示状态
      imgSrc: '', // 用户图像
      power: sessionStorage.getItem('power') // 用户权限
    }
  },
  created () {
    this.imgSrc = this.$store.getters.avatar
  },
  methods: {
    onClick () {
      this.sheetShow = true
    },
    handleLogout () {
      this.$dialog.confirm({
        title: '提示',
        message: '您确定要退出登录吗?',
        confirmButtonColor: 'burlywood'
      }).then(() => {
        sessionStorage.clear() // 清除sessionStorage
        window.location.reload()
      }).catch(() => { })
    },
    // 图片上传
    afterRead (file) {
      const formdata = new FormData()
      formdata.append('filePath', file.file)
      formdata.append('userid', sessionStorage.getItem('userId'))
      uploadImage(formdata).then(res => {
        console.log(res)
        if (res.msg === '上传成功') {
          this.sheetShow = false
          this.$toast.success('图片上传成功')
          this.imgSrc = res.filePath
          sessionStorage.setItem('userImg', res.filePath)
          this.$store.commit('SET_AVATAR', res.filePath)
        } else if (res.msg === '上传图片超限制') {
          this.sheetShow = false
          this.$toast('上传图片超限制')
        } else {
          this.sheetShow = false
          this.$toast.fail('图片上传失败')
        }
      })
    },
    click1 () {
      this.$router.push({ path: '/Task' })
    },
    click2 () {
      this.$router.push({ path: '/myRecord' })
    },
    click3 () {
      this.$router.push({ path: '/MyLeave' })
    },
    click4 () {
      this.$router.push({ path: '/Examine' })
    },
    click5 () {
      if (this.power === '部门审核人') {
        this.$router.push({ path: '/Leave' })
      }
    },
    click6 () {
      this.$router.push({ path: '/Performance' })
    },
    click7 () {
      this.$router.push({ path: '/presentation' })
      // this.$dialog.alert({
      //   message: '数据展示未开发完成',
      //   confirmButtonColor: 'burlywood'
      // })
    }

  }
}
</script>

<style scoped lang="less">
.user {
  width: 100%;
  height: 100%;
  .user-content {
    background-color: white;
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 0.4rem;
    margin-bottom: 0.4rem;
    box-shadow: 0 3px 4px 2px rgb(240, 240, 240);
    .user-name {
      margin-left: 0.5rem;
      font-size: 0.5rem;
    }
  }
  .van-popup {
    .van-uploader {
      width: 100%;
      /deep/ .van-uploader__input-wrapper {
        width: 100%;
      }
    }
  }
  .content {
    .list1 {
      box-shadow: 0 3px 4px 2px rgb(240, 240, 240);
    }
    .list2 {
      margin-top: 0.2rem;
      box-shadow: 0 3px 4px 2px rgb(240, 240, 240);
    }
  }
}
</style>
